<template>
  <div class="role-management">
    <div class="header-section">
      <h2>角色管理</h2>
      <div class="search-bar">
        <el-input
          v-model="searchForm.roleName"
          placeholder="角色名称"
          class="search-input"
        />
        <el-button type="primary" @click="handleSearch">查询</el-button>
        <el-button @click="resetSearch">重置</el-button>
      </div>
    </div>

    <div class="table-section">
      <el-table :data="roleList" style="width: 100%">
        <el-table-column prop="id" label="序号" min-width="100" />
        <el-table-column prop="roleName" label="角色名称" min-width="200" />
        <el-table-column prop="roleDesc" label="角色描述" min-width="300" />
        <el-table-column prop="createTime" label="创建时间" min-width="160" />
        <el-table-column label="操作" min-width="250" fixed="right">
          <template #default="scope">
            <el-button
              type="primary"
              size="small"
              @click="handleEdit(scope.row)"
              style="margin-right: 8px"
            >
              编辑
            </el-button>
            <el-button
              type="warning"
              size="small"
              @click="handleAssignPermission(scope.row)"
              style="margin-right: 8px"
            >
              分配权限
            </el-button>
            <el-button
              type="danger"
              size="small"
              @click="handleDelete(scope.row)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination">
        <el-pagination
          v-model:current-page="pagination.currentPage"
          v-model:page-size="pagination.pageSize"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>

    <!-- 添加/编辑角色对话框 -->
    <el-dialog
      v-model="dialogVisible"
      :title="dialogTitle"
      width="500px"
      :close-on-click-modal="false"
    >
      <el-form :model="formData" label-width="100px">
        <el-form-item label="角色名称" prop="roleName">
          <el-input v-model="formData.roleName" placeholder="请输入角色名称" />
        </el-form-item>
        <el-form-item label="角色描述" prop="roleDesc">
          <el-input
            v-model="formData.roleDesc"
            placeholder="请输入角色描述"
            type="textarea"
            :rows="3"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSave">保存</el-button>
      </template>
    </el-dialog>

    <!-- 分配权限对话框 -->
    <el-dialog
      v-model="permissionDialogVisible"
      title="分配权限"
      width="600px"
      :close-on-click-modal="false"
    >
      <el-tree
        v-model="formData.permissions"
        :data="permissionList"
        show-checkbox
        node-key="id"
        default-expand-all
        :props="{
          children: 'children',
          label: 'name',
        }"
      />
      <template #footer>
        <el-button @click="permissionDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSavePermission">保存</el-button>
      </template>
    </el-dialog>

    <!-- 确认删除对话框 -->
    <el-dialog
      v-model="deleteDialogVisible"
      title="确认删除"
      width="300px"
      :close-on-click-modal="false"
    >
      <div class="delete-confirm">确定要删除此角色吗？</div>
      <template #footer>
        <el-button @click="deleteDialogVisible = false">取消</el-button>
        <el-button type="danger" @click="confirmDelete">确定</el-button>
      </template>
    </el-dialog>

    <!-- 批量操作 -->
    <div class="batch-operations">
      <el-button type="primary" @click="handleAddRole">添加角色</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { ElMessage } from "element-plus";

// 搜索表单
const searchForm = reactive({
  roleName: "",
});

// 分页信息
const pagination = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 100,
});

// 对话框状态
const dialogVisible = ref(false);
const permissionDialogVisible = ref(false);
const deleteDialogVisible = ref(false);
const dialogTitle = ref("添加角色");
const formData = reactive({
  id: "",
  roleName: "",
  roleDesc: "",
  permissions: [],
});

const currentDeleteId = ref("");

// 模拟角色数据
const roleList = ref([
  {
    id: 1,
    roleName: "超级管理员",
    roleDesc: "系统最高权限",
    createTime: "2023-01-01 00:00:00",
  },
  {
    id: 2,
    roleName: "管理员",
    roleDesc: "具有大部分管理权限",
    createTime: "2023-01-02 10:00:00",
  },
  {
    id: 3,
    roleName: "部门经理",
    roleDesc: "部门管理权限",
    createTime: "2023-01-03 14:30:00",
  },
  {
    id: 4,
    roleName: "普通员工",
    roleDesc: "基础功能权限",
    createTime: "2023-01-04 09:15:00",
  },
  {
    id: 5,
    roleName: "财务人员",
    roleDesc: "财务相关权限",
    createTime: "2023-01-05 16:45:00",
  },
  {
    id: 6,
    roleName: "人事专员",
    roleDesc: "人事相关权限",
    createTime: "2023-01-06 11:20:00",
  },
  {
    id: 7,
    roleName: "市场专员",
    roleDesc: "市场相关权限",
    createTime: "2023-01-07 15:10:00",
  },
  {
    id: 8,
    roleName: "技术支持",
    roleDesc: "技术支持相关权限",
    createTime: "2023-01-08 10:30:00",
  },
  {
    id: 9,
    roleName: "客服专员",
    roleDesc: "客服相关权限",
    createTime: "2023-01-09 14:00:00",
  },
  {
    id: 10,
    roleName: "访客",
    roleDesc: "只读权限",
    createTime: "2023-01-10 09:45:00",
  },
]);

// 模拟权限数据
const permissionList = ref([
  {
    id: "1",
    name: "用户管理",
    children: [
      { id: "1-1", name: "查看用户" },
      { id: "1-2", name: "添加用户" },
      { id: "1-3", name: "编辑用户" },
      { id: "1-4", name: "删除用户" },
    ],
  },
  {
    id: "2",
    name: "角色管理",
    children: [
      { id: "2-1", name: "查看角色" },
      { id: "2-2", name: "添加角色" },
      { id: "2-3", name: "编辑角色" },
      { id: "2-4", name: "删除角色" },
      { id: "2-5", name: "分配权限" },
    ],
  },
  {
    id: "3",
    name: "部门管理",
    children: [
      { id: "3-1", name: "查看部门" },
      { id: "3-2", name: "添加部门" },
      { id: "3-3", name: "编辑部门" },
      { id: "3-4", name: "删除部门" },
    ],
  },
  {
    id: "4",
    name: "系统日志",
    children: [{ id: "4-1", name: "查看日志" }],
  },
]);

// 搜索功能
const handleSearch = () => {
  ElMessage.success("搜索功能已触发");
};

// 重置搜索
const resetSearch = () => {
  searchForm.roleName = "";
};

// 添加角色
const handleAddRole = () => {
  dialogTitle.value = "添加角色";
  formData.id = "";
  formData.roleName = "";
  formData.roleDesc = "";
  dialogVisible.value = true;
};

// 编辑角色
const handleEdit = (row) => {
  dialogTitle.value = "编辑角色";
  Object.assign(formData, row);
  dialogVisible.value = true;
};

// 分配权限
const handleAssignPermission = (row) => {
  formData.id = row.id;
  formData.roleName = row.roleName;
  formData.permissions = [];
  permissionDialogVisible.value = true;
};

// 删除角色
const handleDelete = (row) => {
  currentDeleteId.value = row.id;
  deleteDialogVisible.value = true;
};

// 确认删除
const confirmDelete = () => {
  const index = roleList.value.findIndex(
    (item) => item.id === currentDeleteId.value
  );
  if (index > -1) {
    roleList.value.splice(index, 1);
    ElMessage.success("角色删除成功");
  }
  deleteDialogVisible.value = false;
};

// 保存角色
const handleSave = () => {
  if (dialogTitle.value === "添加角色") {
    // 添加新角色
    const newRole = {
      id: roleList.value.length + 1,
      roleName: formData.roleName,
      roleDesc: formData.roleDesc,
      createTime: new Date().toLocaleString("zh-CN"),
    };
    roleList.value.unshift(newRole);
  }
  dialogVisible.value = false;
  ElMessage.success(
    dialogTitle.value === "添加角色" ? "角色添加成功" : "角色编辑成功"
  );
};

// 保存权限
const handleSavePermission = () => {
  permissionDialogVisible.value = false;
  ElMessage.success("权限分配成功");
};

// 分页功能
const handleSizeChange = (size) => {
  pagination.pageSize = size;
};

const handleCurrentChange = (current) => {
  pagination.currentPage = current;
};
</script>

<style scoped>
.role-management {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
}

.header-section {
  margin-bottom: 20px;
}

.header-section h2 {
  margin-bottom: 16px;
  color: #333;
}

.search-bar {
  display: flex;
  gap: 12px;
  align-items: center;
}

.search-input {
  width: 200px;
}

.table-section {
  margin-bottom: 20px;
  overflow-x: auto;
}

.el-table {
  width: 100%;
}

/* 优化表格布局，消除右侧空白 */
.el-table__header,
.el-table__body {
  width: 100% !important;
}

/* 让表格列自动填充可用空间 */
.el-table__header-wrapper,
.el-table__body-wrapper {
  overflow-x: visible;
}

.pagination {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

.batch-operations {
  margin-bottom: 16px;
}

.delete-confirm {
  text-align: center;
  padding: 20px 0;
  color: #666;
}
</style>
